<template>
  <div class="app-container">
    <div class="app-back">
      <div class="background-color"></div>
    </div>
    <div class="page-container">
      <router-view />
    </div>
    <div class="tabbar-container">
      <TabbarComponent :menuList="list" />
    </div>
  </div>
</template>
<script>
import TabbarComponent from "./components/Tabbar.vue";
import { routes } from "./router";
export default {
  components: {
    TabbarComponent
  },
  setup() {
    const list = routes.filter(item => item.nav === true);
    return {
      list
    };
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 254, 230);
  z-index: -2;
  .app-back {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // .background-color {
    //   width: 100%;
    //   height: 150px;
    //   background-color: rgb(92, 32, 213);
    //   border-radius: 0 0 15px 15px;
    // }
  }
  .page-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
  }
  .tabbar-container {
  }
}
</style>
